<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11_固定定位广告条</title>
    <style>
        .main{
            margin-top: 130px;
        }
        .top{
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 120px;
            background-color: #f00;
        /*  viewport视口   50vw  50vh*/
        }
        .left{
            position: fixed;
            left: 0;
            top: 50vh;/*这里不用50% 保证一直在最外面*/
            width: 100px;
            height: 100px;
            background-color: #0f0;
        }
        .right{
            position: fixed;
            right: 0;
            top: 50vh;
            width: 100px;
            height: 100px;
            background-color: #00f;
        }
    </style>
</head>
<body>
  <div class="top">我是顶部广告条</div>
  <div class="left">我是左侧广告条</div>
  <div class="right">我是右侧广告条</div>
  <div class="main">
      我是内容
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci aperiam consectetur dolorem
      dolores earum esse excepturi harum incidunt laborum nobis officia quia quidem quisquam ratione recusandae
      repellendus, temporibus unde.
    </div>
    <div>Alias animi asperiores blanditiis dolore enim error et eveniet fugit, illo inventore iure labore laudantium
      maxime molestiae nemo nobis quas quidem quisquam repellat sed soluta temporibus vel veritatis voluptate
      voluptates?
    </div>
    <div>Ipsum iure numquam quisquam sapiente sed! Aliquam, architecto cum cupiditate debitis dicta dolores ea illo iste
      natus nemo, nesciunt nostrum quibusdam quisquam quos repellat reprehenderit unde voluptatem. Cum eveniet,
      recusandae.
    </div>
    <div>Accusantium aliquam doloribus eligendi ex hic incidunt, iste iusto maxime natus neque nostrum officiis omnis
      perspiciatis quia quos repellat sint! Aliquam aperiam dicta dolorem ducimus esse et incidunt, ipsum omnis.
    </div>
    <div>Dolor in incidunt ipsa magni praesentium quasi, qui sint ut. Amet deleniti eius eligendi incidunt ipsam itaque
      natus, neque quaerat sequi veniam. Animi aspernatur eveniet ex exercitationem laboriosam placeat quo!
    </div>
    <div>Amet asperiores debitis deserunt doloremque earum, harum hic id inventore libero nihil qui quis repellendus
      voluptatum. Aliquam at dolorem, eaque eos magnam modi officia, sequi sunt suscipit ut voluptate, voluptatem.
    </div>
    <div>Dolor dolore eveniet fuga iusto nulla praesentium quam qui quod repellendus. Aliquid at, deleniti ducimus eos
      et facere inventore, magnam quo quos rerum similique sunt tenetur vel veritatis voluptate voluptatum?
    </div>
    <div>Odit praesentium quam quibusdam? Architecto asperiores, atque deserunt doloremque fuga laudantium, magni quidem
      reprehenderit, sapiente sed tenetur ullam veniam voluptate. Accusamus consectetur dolores excepturi laborum nihil
      nostrum, quasi reprehenderit sed.
    </div>
    <div>Accusamus aliquam architecto commodi deleniti doloribus eligendi error esse, impedit incidunt iste iure
      laudantium natus, nesciunt non, pariatur perferendis perspiciatis possimus quae quibusdam quod ratione repudiandae
      sapiente unde voluptas voluptatum.
    </div>
    <div>Adipisci amet cumque ducimus eos exercitationem, explicabo facere fugiat, hic illo impedit in iste laboriosam
      magni molestiae, mollitia natus nostrum obcaecati perferendis porro quo tempora tenetur veritatis. Maiores, quia
      voluptatum!
    </div>
    <div>Aspernatur aut cum cumque debitis doloremque doloribus ducimus eum excepturi id in ipsam magni modi molestiae
      mollitia, omnis perspiciatis possimus qui sapiente, unde voluptatum? Corporis expedita hic laudantium omnis
      placeat.
    </div>
    <div>Aperiam aspernatur atque blanditiis cum cupiditate dolore ipsa ipsam nam pariatur qui tempora vero vitae,
      voluptates! Architecto delectus, in inventore itaque laudantium odio optio possimus reiciendis saepe sint sunt
      temporibus.
    </div>
    <div>Aliquid atque debitis deserunt, harum nemo nisi praesentium sunt tenetur totam. Amet beatae consectetur debitis
      exercitationem explicabo fugit, id labore libero mollitia porro ratione recusandae soluta sunt tenetur totam
      voluptates!
    </div>
    <div>Aperiam assumenda aut consectetur, deserunt illo impedit, in itaque necessitatibus officia pariatur
      reprehenderit sint ut. Ad consequuntur eos fuga libero, optio qui sequi? Alias asperiores minus placeat quibusdam
      quis, vel.
    </div>
    <div>Ab accusantium ad aliquam asperiores aut consectetur consequuntur cupiditate dolorum ea et facere fuga,
      incidunt libero maiores nemo, officia quod, rem sunt voluptates voluptatum. Accusantium expedita facere ipsam
      nostrum ratione!
    </div>
    <div>Atque dicta dolores eius expedita fuga incidunt quia quisquam reprehenderit! Consequuntur cumque dolores earum
      eum harum nobis quasi? Deserunt, maxime, veritatis! Deleniti dolorum eius magnam odit optio qui, tempora vero?
    </div>
    <div>Ad, aut commodi eos, facilis magnam, modi necessitatibus pariatur quibusdam quo repellendus temporibus veniam!
      Aliquam animi assumenda, at autem cum, delectus earum eveniet ex iste libero magnam modi quaerat rem.
    </div>
    <div>Dolore esse, molestias officia porro possimus quaerat quibusdam quis? Ab aliquid blanditiis harum, magnam
      molestiae necessitatibus quisquam quo? Consequatur dicta dolorum esse fugit iusto necessitatibus possimus, quaerat
      quas reprehenderit ullam.
    </div>
    <div>Accusantium aut cupiditate dignissimos ducimus inventore recusandae soluta tempore veniam? A ad adipisci
      doloribus hic illo incidunt magnam magni nihil optio quos? Accusantium harum ipsam maiores, porro repellendus
      repudiandae saepe.
    </div>
    <div>Ea quae, qui! Ab ad animi architecto assumenda at cum dignissimos earum, eos eveniet exercitationem facilis
      fuga magnam molestias nemo nobis omnis pariatur quae quam qui quidem repudiandae sed ut.
    </div>
    <div>Aliquid culpa delectus ducimus excepturi fuga laboriosam laborum libero magnam maxime optio, quaerat quam
      quisquam similique soluta sunt! Alias assumenda beatae distinctio dolore iste, nihil optio provident vel! Ipsa,
      voluptate.
    </div>
    <div>Adipisci commodi culpa eum fuga, fugit id, incidunt ipsa laboriosam molestiae nihil non numquam obcaecati
      perferendis quis ratione reprehenderit voluptate. Animi excepturi inventore laborum magnam minus officiis quidem
      sit voluptas.
    </div>
    <div>Accusamus assumenda et labore libero quos! Aliquam animi atque eveniet, ex excepturi exercitationem facere ipsa
      itaque laudantium minus nam nesciunt nisi porro possimus provident quidem reiciendis rerum similique ullam velit?
    </div>
    <div>Alias maiores nemo odit quos reprehenderit! Eius nostrum nulla rerum? Commodi ex impedit itaque iure natus
      numquam officiis porro quo sunt, vel? Alias magni nihil nobis quis ratione, voluptatum! Perspiciatis.
    </div>
    <div>Amet architecto cum cumque deserunt doloremque, eos, et ex facilis illo, ipsa laborum molestias nam nemo nihil
      non nulla omnis optio perspiciatis quibusdam repellat sapiente sint soluta unde veniam vitae!
    </div>
    <div>Atque distinctio dolor dolorem dolores exercitationem in incidunt iste magni maxime nisi perferendis
      praesentium quia quo reiciendis repellat, repudiandae soluta voluptate voluptates? Adipisci asperiores blanditiis,
      consequatur quis ratione reiciendis veniam!
    </div>
    <div>Animi deserunt illo itaque nobis odit provident quas? Ab assumenda autem culpa debitis dolorum est facere fuga
      mollitia nam nobis odio praesentium quae quam quasi rerum totam ullam unde, voluptas.
    </div>
    <div>Doloremque eius explicabo impedit ipsa magni nihil pariatur perspiciatis quis veritatis voluptate! Dicta
      dolorem explicabo nisi nobis quaerat quam recusandae. Aut beatae consequatur fuga illum incidunt laborum, nesciunt
      quasi quisquam.
    </div>
    <div>Asperiores culpa eum explicabo, inventore ipsa minus perspiciatis quidem totam veritatis. Exercitationem in
      odio quidem vero? Beatae consequuntur delectus, facere incidunt minima natus quod? Earum illum nam obcaecati rerum
      ullam.
    </div>
    <div>Accusamus cum, doloribus dolorum eaque enim eos est exercitationem expedita fuga illum ipsa ipsam iste magni
      nulla numquam officiis omnis optio perspiciatis quae quia quo recusandae saepe tempora tempore, voluptatibus!
    </div>
    <div>Aperiam debitis maxime minus provident ratione. Ducimus, et, quasi? Aperiam autem deserunt dicta dignissimos
      dolores dolorum eaque eligendi esse, ex explicabo inventore iste laborum nisi officia officiis quo quod voluptate!
    </div>
    <div>Alias asperiores atque beatae consectetur corporis cum cumque delectus deserunt dolor eius eligendi eveniet in
      laboriosam nesciunt perferendis, placeat quod recusandae rem reprehenderit repudiandae sit tempore tenetur unde
      voluptate, voluptates.
    </div>
    <div>Accusamus architecto aut autem delectus, dicta dignissimos dolor dolores excepturi hic incidunt iure libero
      mollitia, natus nisi obcaecati odio omnis perferendis quas, quo ratione recusandae sapiente similique suscipit
      unde vero.
    </div>
    <div>Ab, blanditiis cupiditate eius eos excepturi, nemo odit quibusdam quod ratione recusandae saepe sit, vel
      veritatis? Ad eius enim excepturi facilis magnam modi molestias nobis obcaecati officia officiis, quae,
      voluptatibus?
    </div>
    <div>Adipisci alias aliquid, cum, expedita explicabo hic, impedit in inventore ipsum iste iure numquam quasi
      reprehenderit sapiente ut? Aliquid cupiditate harum illo impedit, maxime molestiae nisi numquam officia quaerat
      temporibus?
    </div>
    <div>Amet consequuntur distinctio expedita, nemo nobis omnis perspiciatis recusandae rem veniam voluptates? Ab
      accusantium dignissimos dolore doloremque dolores exercitationem expedita fuga fugiat impedit ipsam, iure
      molestiae quibusdam sapiente, sint, totam.
    </div>
    <div>Adipisci amet asperiores blanditiis dignissimos doloribus eveniet fugiat inventore maiores qui sed soluta
      tempora, voluptate? At dicta eligendi et molestias saepe similique ullam! Blanditiis labore nam placeat quasi
      repellat repudiandae.
    </div>
    <div>Asperiores dolorum laborum magnam molestias pariatur praesentium quis quos, totam! Autem beatae, consequuntur
      corporis cum dignissimos dolor excepturi facere iste, magnam omnis perspiciatis placeat qui quo recusandae
      repellat, sint sunt!
    </div>
    <div>Adipisci aspernatur dignissimos esse excepturi hic incidunt quo voluptas? A ad beatae cupiditate illum, itaque
      minus mollitia, nisi, pariatur quae saepe soluta velit vitae. Distinctio illo quibusdam rem repudiandae unde?
    </div>
    <div>Ab, architecto assumenda consequatur deleniti eos eveniet harum hic id in labore magni mollitia nulla possimus
      repellendus reprehenderit temporibus ut. Aliquid cupiditate dolore doloremque earum officiis pariatur provident
      quo soluta!
    </div>
    <div>Animi aspernatur consequatur dolore dolorum enim explicabo fugit non perferendis quam quas quibusdam, sit ullam
      unde veritatis voluptas voluptate voluptates! Aut deleniti ea, fuga id ipsam natus quo similique voluptate?
    </div>
    <div>Atque beatae doloribus eaque, ex facere inventore, molestiae molestias neque nisi optio placeat quia quisquam
      saepe totam, vel? Accusamus amet consequatur eveniet nihil optio recusandae voluptatem. Illum ipsum molestiae
      voluptatum.
    </div>
    <div>Consequatur facilis fuga laudantium magni modi possimus, quis sapiente tempora? Assumenda dignissimos
      distinctio dolores eveniet itaque nam, quasi unde voluptas. Consequuntur dicta dolores et labore laborum non
      perspiciatis saepe tempora.
    </div>
    <div>Dolor enim facilis iure maxime neque nesciunt porro quisquam quos. Molestiae repudiandae, rerum? Adipisci
      alias, consequuntur delectus enim excepturi ipsam itaque molestiae neque, numquam odit quas soluta suscipit vero
      voluptates.
    </div>
    <div>Aliquid aperiam at beatae consectetur cum doloribus, ducimus eum facere fuga in incidunt inventore ipsam
      laborum, maxime nemo nihil nisi nostrum perspiciatis placeat porro quam quis, quisquam sapiente temporibus
      voluptatibus?
    </div>
    <div>Animi architecto aspernatur autem consectetur culpa cumque doloremque eaque eligendi, eos et ex harum id
      impedit laboriosam natus nemo porro possimus quo reiciendis reprehenderit similique soluta sunt totam unde, vero.
    </div>
    <div>At laboriosam magni maiores, minus nesciunt obcaecati quisquam rem similique sint velit. A, ea sed. Alias at
      eius illo natus, nulla odio odit pariatur porro repellendus, sint vel velit vero?
    </div>
    <div>Assumenda deleniti dicta dolor iure laudantium magnam, natus necessitatibus odio quam quia quod quos
      repudiandae tempora tenetur totam velit voluptatem voluptatum! Asperiores facilis hic id, necessitatibus officiis
      quas quidem veniam!
    </div>
    <div>Dolore fugiat ipsam sed! Excepturi laborum nihil perspiciatis quam quos sunt tempore temporibus totam!
      Aspernatur impedit nam totam. Consequuntur dicta ea ipsa laboriosam magnam modi perspiciatis quam repellat saepe
      sequi.
    </div>
    <div>Ab accusamus accusantium amet beatae consectetur consequuntur, dicta, eius error expedita incidunt inventore
      laboriosam maiores molestiae nihil officiis recusandae rem sed suscipit tempore vero. Beatae consequatur
      laudantium neque possimus soluta?
    </div>
    <div>Alias commodi cum distinctio eligendi facilis incidunt iste itaque non obcaecati sed? Adipisci alias architecto
      consectetur cumque doloribus ea, est numquam officia pariatur quisquam quo repellat sint tempore vitae voluptate?
    </div>
    <div>Cum dolores eius eligendi, enim esse fuga impedit ipsum laboriosam magnam minima molestiae nulla porro
      praesentium quisquam quo, saepe tempora temporibus velit voluptatem voluptatibus. Alias amet labore modi
      perferendis temporibus.
    </div>
    <div>Delectus minima quaerat, quisquam sapiente sed soluta tempora vitae! Adipisci asperiores natus nulla temporibus
      totam! Aut debitis iusto sapiente sit! Autem ducimus earum incidunt iure, magni minima nostrum repellat tempora.
    </div>
    <div>A, aliquam aperiam aspernatur, consectetur consequatur consequuntur delectus dicta eligendi eos et eveniet
      fugiat harum illo inventore iure laboriosam nam, odit perferendis possimus quasi quibusdam quod sequi tenetur unde
      voluptatibus?
    </div>
    <div>Ad blanditiis dolorum facere fugiat obcaecati placeat quibusdam quo? Cum harum, nulla! Modi perferendis
      quibusdam rem tempora tenetur voluptatem. Consequatur delectus doloribus eveniet fugit iure laborum modi nobis qui
      reprehenderit.
    </div>
    <div>Eaque, expedita ipsum iusto maxime obcaecati quaerat sapiente? Dolore minima nihil sunt. Architecto asperiores
      at consectetur enim error esse est inventore laudantium nihil, quaerat quidem quod. Assumenda dignissimos natus
      officia?
    </div>
    <div>Aliquam aperiam aspernatur, cumque dolorum eius, ex harum illum minima modi, neque nesciunt obcaecati officia
      optio ullam unde? Animi delectus iusto maiores minima nesciunt velit vero voluptatibus! A aliquid, animi!
    </div>
    <div>Ab adipisci architecto assumenda autem consectetur cum cupiditate deserunt, distinctio dolores ea eos esse
      eveniet excepturi, fugit laboriosam libero molestiae, nemo non numquam pariatur quasi qui quibusdam repudiandae
      unde voluptates.
    </div>
    <div>Ad alias commodi debitis deleniti ducimus eos impedit ipsam nesciunt officia perspiciatis quos repellat rerum
      sint sunt suscipit tempora, temporibus ut vitae? Consectetur consequatur dicta facilis magnam optio sequi tenetur.
    </div>
    <div>Aliquid at, consectetur corporis deleniti facilis fuga harum hic magni minima natus necessitatibus porro quam,
      repellat ullam voluptate? Commodi delectus ea eaque numquam omnis placeat provident, voluptatum. Commodi, nam,
      sit?
    </div>
  </div>
</body>
</html>